<template>
  <div class="person-box">
    <div class="ge_ren_xin_xi">
      <el-row>
        <el-col :span="7">
          <el-avatar :size="200"
                     src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-avatar>
        </el-col>
        <el-col :span="8">
          <el-row>
            <h3>{{ personInfo.loginName }}
              <el-button @click="$router.push('/person-info-setting')" size="medium" icon="el-icon-setting "
                         circle></el-button>
            </h3>
          </el-row>
          <el-row>
            <p>&emsp;&emsp;
              {{ge_xing_qian_ming.content}}  ---{{ge_xing_qian_ming.origin}}【{{ge_xing_qian_ming.tag}}】
            </p>
          </el-row>

        </el-col>
        <el-col :span="8" style="height:240px ">
          <el-button
              @click="jin_ri_cai_dan()"
              style="margin: 80px 100px;">今日菜谱</el-button>
        </el-col>
      </el-row>
    </div>

    <el-divider></el-divider>
    <div class="yonghu_shoucang_xihuan">
      <el-row><h2>用户收藏</h2></el-row>
      <el-row >
        <el-col :span="5" v-for="i in user_favorite" :offset="1">
          <el-image
              style="height: 130px;width: 230px"
              src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-image>
          <el-link>
            <div style="text-align: center;"
                 @click="$router.push('/detail/'+i.idCookbook)" >
              {{i.cookbookName}}
            </div>
          </el-link>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-button style="width: 70px;height: 130px">
            ><br>
            更<br>
            多<br>
          </el-button>
        </el-col>
      </el-row>
      <el-row><h2>用户喜欢</h2></el-row>
      <el-row>
        <el-col :span="5" v-for="i in 3" :offset="1">
          <el-image
              style="height: 130px;width: 230px"
              src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-image>
          <div style="text-align: center;">123</div>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-button style="width: 70px;height: 130px">
            ><br>
            更<br>
            多<br>
          </el-button>
        </el-col>
      </el-row>
    </div>

    <el-divider></el-divider>
    <div class="jian_kang_yu_ce">
      <h2>健康预测</h2>
      <el-image
          src="https://gitee.com/yangtao-china/picgo-image/raw/master/健康预测图片.png"></el-image>
    </div>

    <todayCaipu
        @change_jinricaican_visiable="jin_ri_cai_dan"
        :is-visiable="this.todaycaipu_isVisiable"></todayCaipu>
  </div>
</template>

<script>

import todayCaipu from "@/components/todayCaipu";
export default {
  name: "personHome",
  components:{
    todayCaipu,
  },
  data() {
    return {
      personInfo: '',
      ge_xing_qian_ming: '',
      user_favorite:'',
      todaycaipu_isVisiable:false
    }
  },
  methods: {
    async get_ge_xing_qian_ming() {
      const {data: res} = await this.$http.get('https://api.xygeng.cn/one')
      this.ge_xing_qian_ming = res.data
      // console.log(this.ge_xing_qian_ming)
    },
    async get_user_favorite() {
      let {data:res} = await this.$http.post(
          process.env.VUE_APP_SERVER + '/user-cookbook/getUserAllFavorite',
          this.personInfo
      )
      this.user_favorite = res.data
      console.log(this.user_favorite+'=======')
      console.log("获取用户收藏的菜谱列表")
    },
    // 今日菜单
    async jin_ri_cai_dan() {
      this.todaycaipu_isVisiable=!this.todaycaipu_isVisiable
      console.log(this.todaycaipu_isVisiable)
    }
  },
  mounted() {
    console.log('mounted---')
    this.personInfo = SessionStorage.get(SESSION_KEY_LOGIN_MEMBER);
    console.log(this.personInfo)
    this.get_ge_xing_qian_ming()
    this.get_user_favorite()
  }
}
</script>

<style scoped>
.jian_kang_yu_ce {
  width: 90%;
  margin: 20px auto 20px auto;
  height: 660px;
  /*background-color: #5a626c;*/
}

.yonghu_shoucang_xihuan {
  margin: 20px auto 20px auto;
  width: 90%;
  height: 490px;
  /*background-color: #99a9bf;*/
}

.ge_ren_xin_xi {
  /*顺序依次是 上，右，下，左*/
  margin: 20px auto 20px auto;
  width: 90%;
  height: 240px;
  /*background-color: aqua;*/
}

.person-box {
  /*background-color: aquamarine;*/
  width: 1200px;
}
</style>